<template>
  <svg-icon class="fullscreen" :icon-class="ico" @click="toggleFullScreen" />
</template>

<script>
import ScreeFull from 'screenfull/dist/screenfull'
export default {
  name: 'FallPage',
  data() {
    return {
      isTrue: false
    }
  },
  computed: {
    ico() {
      return this.isTrue ? 'exit-fullscreen' : 'fullscreen'
    }
  },
  methods: {
    toggleFullScreen() {
      if (ScreeFull.enabled) {
        ScreeFull.toggle()
        this.isTrue = !this.isTrue
      } else {
        this.$message.error('兄弟, 您的浏览器版本过低, 不支持全屏功能哦!')
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 30px!important;
  height: 30px!important;
  fill: #fff!important;
  cursor: pointer;
}
</style>
